<template>
    <div class='tstrtvs_page'>
        <div class="tstrtvs_control">
            <span class="max_play_time" v-if="maxPlayTime">{{ maxPlayTime }} 秒后停止播放</span>&nbsp;&nbsp;
            <span>
                <i @click="screensChanged(1)" :style="{ color: (state.screenNum === 1 ? '#00cccc' : '#fff') }"
                    class='iconfont icon-juxing' />&nbsp;&nbsp;
                <i @click="screensChanged(4)" :style="{ color: (state.screenNum === 4 ? '#00cccc' : '#fff') }"
                    class='iconfont icon-a-xingzhuangjiehe7' />&nbsp;&nbsp;
                <i @click="screensChanged(6)" :style="{ color: (state.screenNum === 6 ? '#00cccc' : '#fff') }"
                    class='iconfont icon-a-xingzhuangjiehe8' />&nbsp;&nbsp;
                <i @click="screensChanged(9)" :style="{ color: (state.screenNum === 9 ? '#00cccc' : '#fff') }"
                    class='iconfont icon-xingzhuangjiehebeifen' />&nbsp;&nbsp;
                <i @click="screensChanged(16)" :style="{ color: (state.screenNum === 16 ? '#00cccc' : '#fff') }"
                    class='iconfont icon-a-xingzhuangjiehe9' />&nbsp;&nbsp;
            </span>
            <a-divider type="vertical" />
            <span>
                
                <span @click="closeAllHandle" style="cursor: pointer">
                    <i class='iconfont icon-a-xingzhuangjiehe5' />
                    关闭全部
                </span>
            </span>
            <a-divider type="vertical"/>
        </div>
        <div class='webRtc'>
            <div v-for="item in state.screenNum" :key="item" :style="getstyle(item)">
                <Jessibuca @ipCallOne = 'ipCallOne' @closeVideoOne = 'closeVideoOne' :playObj = 'state.videoPlayList[item-1] || {}'></Jessibuca>
            </div>

    

        </div>

    </div>
</template>

<script setup>
import { reactive, watch, onMounted, onBeforeUnmount,defineEmits, ref, inject, defineProps } from 'vue';


import { useRoute, useRouter } from 'vue-router';
import Jessibuca from "@/components/Jessibuca";

import { useVideoCountdown } from "@/hooks/useVideoCountdown.js";
const emit = defineEmits(['closeVideo','ipCallOne'])

const props = defineProps({
    playList: {
        default: () => [],
        type: Array
    },
    // usePlayerState: {
    //     type: Object,
    //     default: () => { return { screenNum: 1, maxPlayTime: 100 } }
    // },
})

const state = reactive({


    screenNum: 4,
    maxPlayTime: 100,
    layout: [
        {
            type: [1,1]
        },
        {
            type: [2, 2]
        },
        {
            type: [2, 3]
        },
        {
            type: [3, 3]
        },
        {
            type: [4, 4]
        }
    ],
    videoPlayList:[]

});
// 倒计时结束的回调 关闭全部
const countdownCallBack =()=>{
    // console.log('countdownCallBack',data);
    closeAllHandle()
}
const {maxPlayTime, maxPlayTimeReset,maxPlayTimeClear  } = useVideoCountdown(countdownCallBack);
// 手动切换视频窗口
const screensChanged = (value) => {
    state.screenNum = value;
    emit('closeVideo',{data:{screenNum:state.screenNum},type:'screensChange'})
}

// 获取表格的位置和样式
const getstyle= (i) => {
    let index = i-1;
    if(state.screenNum !=6){
        let $sqrt = Math.sqrt(state.screenNum); //开方 拿到行列总数
        let $bf = (100/$sqrt).toFixed(2);   //宽高百分比
        let $x = Math.floor(index/$sqrt);  //拿到第几行
        let $y = index%$sqrt; //拿到第几列
        return {
            top:$x*$bf+'%',
            left:$y*$bf+'%',
            width:$bf+'%',
            height:$bf+'%',
        }
    }else{
        let defStyle = {
            top:0+'%',
            left:0+'%',
            width:33.3+'%',
            height:33.3+'%',
        }
        if(index == 0){
            defStyle.width =66.6+'%';
            defStyle.height =66.6+'%';
            return defStyle
        }else if(index == 1){
            defStyle.left =66.6+'%';
            return defStyle
        }else if(index == 2){
            defStyle.top =33.3+'%';
            defStyle.left =66.6+'%';
            return defStyle
        }else{
            defStyle.top =66.6+'%';
            defStyle.left =33.3*(index%3)+'%';
            return defStyle
        }
    }
}

// 获取自己是第几个窗口
// const filterVideoObj = ($index,$idx) => {
//     let x = state.layout[state.screenNum].type[0];
//     let y = state.layout[state.screenNum].type[1];
//     let $i = x*$index + $idx
//     return state.videoPlayList[$i] || {}
// }
// 关闭全部视屏
const closeAllHandle = () => {
    // console.log('closeAllHandle');
    emit('closeVideo',{data:{},type:'allClose'})
    // props.CloseScreen({screenId:-1,type:'allClose'})
}
// 播放器主动关闭某一个视屏
const closeVideoOne = (obj) => {
    // console.log('closeAllHandle',obj);
    emit('closeVideo',{data:obj,type:'one'})
    // props.CloseScreen({screenId:-1,type:'allClose'})
}

const ipCallOne = (obj) => {
    emit('ipCallOne',obj)
}
// 视屏修改  更换窗口
const videoPlayListChange = () => {
    let $screenNum = 1
    if(state.videoPlayList.length >1){
        $screenNum  = 4
    }
    if(state.videoPlayList.length >4){
        $screenNum  = 6
    }
    if(state.videoPlayList.length >6){
        $screenNum = 9
    }
    if(state.videoPlayList.length >9){
        $screenNum  = 16
    }
    // console.log('$screenNum:',$screenNum,'videoPlayList.length',state.videoPlayList.length,state.screenNum);
    if( $screenNum > state.screenNum){
        state.screenNum =$screenNum
    }
}
watch(()=>props.playList, (newval,oldval) => {
    // console.log('playList改变',newval,oldval);
    // selectedKeys.value = value.map(item=>item.id)
    state.videoPlayList = [...newval];
    videoPlayListChange();

    if(state.videoPlayList.filter(item=>item.playUrl).length){
        maxPlayTimeReset();
    }else{
        maxPlayTimeClear()
    }
    // 

},{deep:true});


// 挂载完成时
onMounted(() => {
    // const {maxPlayTime, increment } =useVideoCountdown(countdownCallBack);
    // // 监听window大小变化
    // window.addEventListener("resize", props.WindowResizeHandler);
    // // 监听视频控件DOM大小变化
    // DomSize.bind(PlaylerRTVSRef.value, props.WindowResizeHandler);
    // // 监听浏览器全屏事件
    // document.addEventListener("fullscreenchange", props.fullScreenHandler, false)
})
// 组件卸载前
onBeforeUnmount(() => {
    // window.removeEventListener("resize", props.WindowResizeHandler);

    // 取消监听浏览器全屏事件
    // document.removeEventListener("fullscreenchange", props.fullScreenHandler, false)
    // console.log("----------组件卸载前-close------------");
    // props.CloseScreen({screenId:-1,type:'startClose'});
})





</script>

<style scoped lang="less">
.tstrtvs_page {
    height: 100%;
    width: 100%;
    position: relative;
   
    .tstrtvs_control {
        width: 455px;
        height: 30px;
        position: absolute;
        top: -40px;
        right: 50px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        // padding-right: 30px;
        color: #FFFFFF;
        .iconfont {

            cursor: pointer;
            font-size: 14px;
            color: #A0B1BE;
        }

        .max_play_time {
            color: red;
        }
    }

    .webRtc {
        margin-top: 20px;
        height: calc(100% - 26px);
        // width: 100%;
        width: calc(100% + 13px);
        background: transparent;

        position: relative;
        >div{
            position: absolute;
            // background-color:yellow;
        }
        // flex: 1;
        // display: flex;
        // flex-direction: column;

        // .nmc-row {
        //     display: flex;
        //     margin-top: 6px;
        //     flex: 1;
        // }

        // .list {
        //     flex: 1;
        //     >div {
        //         width: 100%;
        //         height: 100%;
        //     }
        // }
        // .screenNumgroup{
        //     display: flex;
        //     flex-direction: column;
        //     >div:first-of-type{
        //         padding-bottom: 3px;
        //     }
        //     >div:last-of-type{
        //         padding-top: 3px;
        //     }
        // }


    }
}
</style>